this html element adds and again theseare all semantic
15:26 / 24:37•Tam videoya baxın

Semantic HTML Tags | HTML5 Semantic Elements Tutorial

Dave Gray
194K abunəçi
<__slot-el>
29.043 baxış 4 yan 2022 HTML Tutorials for Beginners
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap Learn how to use Semantic HTML tags in this full tutorial. HTML5 semantic elements convey both meaning and structure for our web pages. Applying proper semantics to your web pages helps both browsers and assistive technologies interpret your pages. 🚩 Subscribe ➜ https://bit.ly/3nGHmNn 🚀 This lesson is part of an HTML for Beginners tutorial series playlist:    • HTML Tutorials for Beginners   🔗 Starter Source Code: https://github.com/gitdagray/html_cou... 📬 Course Updates ➜ https://courses.davegray.codes/ Semantic HTML Tags | HTML5 Semantic Elements Tutorial (00:00) Intro (00:05) Welcome (00:25) Setup (01:06) Heading Hierarchy (02:06) nav and hr tags (03:20) The word: "semantic" (04:00) header element (05:33) main element (06:21) footer element (07:30) Labeling multiple nav elements (10:01) article vs section elements (11:49) Adding sections (13:20) aside, details, and summary elements (15:50) mark and time elements (17:57) More sections (19:04) Avoid these HTML tags (for now) (21:04) HTML5 Outliner (23:35) Validate your HTML code 🔗 All Resources for this HTML Tutorial Series: https://github.com/gitdagray/html_course ⚙ Web Dev Tools: Chrome Browser: https://www.google.com/chrome/ Dark New Tab Chrome Extension: https://chrome.google.com/webstore/de... Visual Studio Code (VS Code): https://code.visualstudio.com/ Prettier VS Code Extension: https://marketplace.visualstudio.com/... vscode-icons VS Code Extension: https://marketplace.visualstudio.com/... Github Themes VS Code Extension: https://marketplace.visualstudio.com/... W3C HTML Validator: https://validator.w3.org/ HTML5 Outliner: https://chrome.google.com/webstore/de... 📚 References: MDN HTML: https://developer.mozilla.org/en-US/d... MDN HTML Elements Reference: https://developer.mozilla.org/en-US/d... HTML Entities Character Chart: https://html.spec.whatwg.org/multipag... 🚀 Semantic HTML References: MDN Web Glossary for Semantics: https://developer.mozilla.org/en-US/d... w3Schools Semantic HTML: https://www.w3schools.com/html/html5_... MDN Document and website structure: https://developer.mozilla.org/en-US/d... ✅ Follow Me: Github: https://github.com/gitdagray Twitter: https://twitter.com/yesdavidgray LinkedIn: https://www.linkedin.com/in/davidagray/ Blog: https://yesdavidgray.com Reddit: https://www.reddit.com/user/DaveOnEleven Was this tutorial about Semantic HTML elements helpful? If so, please share. Let me know your thoughts in the comments. #html #html5 #semantics

Dave Gray

194K abunəçi
Daha az göstərin

58 Şərh

Remzi Balakisiyev
Şərh əlavə edin...
Semantic HTML is crucial for the foundation of your websites and web apps. Providing semantics in your HTML - that is, conveying meaning with your structure - helps the browser understand the organizational structure of your content. This also greatly helps with assistive technology such as screen readers - not everyone browsers the web with a mouse. Develop your website with accessibility in mind and a proper structure by applying semantic HTML. Just getting started with HTML? Go to the start of the HTML for Beginners playlist here: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6OlAwitnFUubtE93DO-l0vu
7
I was looking for an HTML course that actually teaches the technical part and explains the reasoning of why we do certain things. Or why we use a certain TAG on an Element. I think absorbing this knowledge since the beginning of your learning journey is without doubt a key part at making decisions in any field in a later day. Furthermore, I found very important the topic discussed at minute 19:12 as I just came back from another tutorial, wasted almost 2 hours and the instructor was using <div> and giving the class name "container" to wrap the whole content on it. I'll definitely will subscribe and start from scratch. I want to switch career at this moment and Front End development it's something I would enjoy doing. With regards,
6
Near the end of the video, you mention checking the Outline. You can check the box for Outline when you use the Validator, and it can display the outline along with the results. Also in the Validator, you can have it show the entire HTML, which can be handy when troubleshooting errors.
1
This is a best video about "Semantic Elements" that I've ever seen. Thank you so much , sir.
9
Definitly one of the best teachers out there , Thanks a lot dave your channel is a gem !!
2
Thanks for this cool tutorial, Dave: descriptive and well-detailed explanation.
This is an awfully underrated subject that almost no one talks about.
3
You did a great job! Thank you very much!
Using semantic elements is a must-have skill for all type of developers, Semantic elements describe your content logically while none sematic ones describe it politically (no offense) 😁 What about the address element? it looks semantic but must be used with care as it refers to contact information instead of an address (as mentioned on MDN) Thanks Dave, that was a good video to start 2022 which I hope it'll be as semantic as HTML5
2
Regarding the <hr> elements, would it make sense to keep the elements on the page between different topic areas but have them invisible. You mentioned that you would use CSS instead to create borders between elements, but is it worth still keeping the <hr> elements for the semantic meaning they provide?
can you please let us know about your VSC color theme? btw thank you for the great video
1
I love your video. They have helped me out a lot. I'm still new, and I'm trying to become a full-stack engineer. I have been looking around, and I keep seeing that you only should use one id and I have 4 of them in my article, so it seems like this <article id="projects"> and I have four pieces is this okay, or should I change to a class and how every time I try my nav bar don't work.
I still see people using the <div> element a lot, and it does bother me! I inspected the source code of a certification provider that offer web development certifications and was surprised to see them use liberal amounts of <div> elements and IDs more than classes to style their sections. From what I have read, the only place to use a <div> element is for things like wrappers and containers. At first I was using sections for these because I felt like I needed to ditch using divs altogether, but they still do have their uses; just like spans actually!
1
Thank you for your work!
1
Great tutorial. Thank you :)
Thanks Dave, you rock man!
Thank you very much for this effort
Subscribed and liked, in response to your effort and time for us. Thanks alot.
Awasome tutorial again👍
1